<template>
	<!-- 查看交通部门发布的最新两则通告 -->
	<div id="container">
		<button id="btn" @click="checkNote">查看公告</button>
		<el-dialog
			title="最新施工公告"
			:visible.sync="dialogVisible"
			width="50%"
			append-to-body
			:close-on-click-modal="false"
			@close="dialogVisible = false"
			v-dialogDrag
		>
			<!-- 最新的两个公告 -->
			<div>
				<div
					id="notice-container"
					v-for="item in recent2Notice"
					:key="item.notice_id"
				>
					<p>
						<span class="span-title">发布时间：</span>
						<span class="span-text">{{ item.notice_time }}</span>
					</p>
					<P>
						<span class="span-title">受影响区域：</span>
						<span class="span-text">{{ item.affected_area }}</span>
					</P>
					<p>
						<span class="span-title">公告内容：</span>
						<span class="span-text">{{ item.notice_content }}</span>
					</p>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">
					确 定
				</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	name: 'Note',
	data() {
		return {
			dialogVisible: false,
			recent2Notice: [], //最新的两则通告
		};
	},
	mounted() {},
	methods: {
		checkNote() {
			this.dialogVisible = true;
			this.$http.get('/notice').then((res) => {
				const { code } = res;
				if (code == 0) {
					this.recent2Notice = res.result.data;
				}
			});
		},
	},
};
</script>

<style scoped>
#notice-container {
	display: block;
	height: 140px;
	width: 700px !important;
	padding-top: 20px;
}
#notice-container p {
	width: 700px !important;
	margin-top: 2px;
	margin-bottom: 2px;
}
.span-title {
	font-size: 16px;
	font-weight: 900;
	color: rgb(11, 107, 249);
}
.span-text {
	font-size: 20px;
}
</style>
